<template>
    <div class="data-manager">
        <div class="left-menu">
            <div class="header">
                高分共性产品与真实性检验共享服务平台
            </div>
            <side-bar @changeCurrentComponents="changeCurrentComponents"></side-bar>
        </div>
        <div class="right-con">
            <div class="right-title">
                网站后台管理
                <div class="tologin">{{ userName }}</div>
            </div>
            <div class="right-box">
                <component :is="currentComponent"></component>
            </div>
        </div>
    </div>
</template>
<script>
import SideBar from './sideBar.vue';
import downloadNum from './downNum/downloadNum.vue';
import watchNum from './watchNum/watchNum.vue';
import userSta from './userSta';
import dataTypeNum from './dataTypeNum/dataTypeNum';
export default {
    name: 'dataManager',
    components: {
        SideBar,
        downloadNum,
        watchNum,
        userSta,
        dataTypeNum,
    },
    data() {
        return {
            currentComponent: '',
            userName: 'admin',
        };
    },
    methods: {
        changeCurrentComponents(data) {
            this.currentComponent = data;
        },
    },
};
</script>
<style lang="scss" scoped>
.data-manager {
    width: 100%;
    height: 100%;
    display: flex;
    .left-menu {
        background-color: #030e39;
        height: 100%;
        .header {
            width: 200px;
            font-size: 20px;
            margin: 20px;
            color: #2fd5ff;
        }
    }
    .right-con {
        -webkit-box-flex: 1;
        -webkit-flex: auto;
        -moz-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        height: 100%;
        background: #fbfbfb;
        .right-title {
            height: 54px;
            width: auto;
            line-height: 54px;
            text-align: left;
            padding-left: 30px;
            font-weight: 500;
            font-size: 20px;
            color: #bbb;
            background: #f7f9fc;
            .tologin {
                float: right;
                color: #030e39;
                margin-right: 85px;
            }
        }
        .right-box {
            height: calc(100% - 54px);
            overflow-y: auto;
        }
    }
}
</style>
